<template lang="">
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">

      <span>选择分类：</span>
      <el-cascader v-model="value" expand-trigger='hover' :options="options" :props="catelist" @change="handleChange">
      </el-cascader>
      <el-table :data="tableData" @selection-change="handleSelectionChange" border style="width: 100%"
        ref="multipleTable" tooltip-effect="dark" v-if='value!=""'>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品 ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="商品名称">
                <span>{{ props.row.namesd }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <a href="#" style="color: #5e69ad;"><span>{{ props.row.Commodity }}</span></a>
              </el-form-item>

              <el-form-item label="商品编号">
                <span>{{ props.row.Storeid }}</span>
              </el-form-item>
              <el-form-item label="商品分类">
                <span>{{ props.row.classification }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.describes }}</span>
              </el-form-item>
              <el-form-item label="商品图片">
                <img :src="props.row.picture" alt="" srcset="" style="width: 200px;height: 200px;">
              </el-form-item>
              <el-form-item label="商品价格/元">
                <span style="color: #e4393c;font-size: 20px;"><i style="font-style: normal;font-size: 14px;">￥</i>{{
                  props.row.Price|rounding
                  }}</span>
              </el-form-item>
            </el-form>
          </template>
</el-table-column>
<el-table-column prop="id" label="商品ID">
</el-table-column>
<el-table-column prop="Storeid" label="商品编号">
</el-table-column>
<el-table-column label="商品上架者">
    <template v-slot='c'>
            <el-tag size="small">{{c.row.username}}</el-tag>
          </template>
</el-table-column>
<el-table-column label="商品审核者">
    <template v-slot='c'>
            <el-tag size="small">{{c.row.sh}}</el-tag>
          </template>
</el-table-column>
<el-table-column label="所属店铺">
    <template v-slot='v'>
            <a href="#" style="color: #5e69ad;"><span>{{ v.row.Commodity }}</span></a>
          </template>
</el-table-column>
<el-table-column prop="Repository" label="商品仓库/件">
</el-table-column>
<el-table-column prop="sell" label="商品出售/件">
</el-table-column>
<el-table-column label=" 上架时间">
    <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.datetimesd }}</span>
          </template>
</el-table-column>
<el-table-column label="操作">
    <template v-slot='scope'>
            <el-button size="mini" type="danger" @click="del(scope.row)"
              v-permission="{action:'delete',effect:'disabled'}">删除
            </el-button>
          </template>
</el-table-column>
</el-table>
<el-button v-permission="{action:'delete'}" type="warning" icon="el-icon-delete" v-if='value!=""' style="margin-top: 10px;" :disabled="multipleSelection==''?true:false" @click='delshop'>批量删除
</el-button>
<el-pagination v-if='value!=""' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.currentPage" :page-sizes="[1,2,3,5,10]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
    background>
</el-pagination>
</el-card>
</div>
</template>
<script>
    export default {
        data() {
            return {
                options: [],
                catelist: {
                    value: 'id',
                    label: 'cat_name',

                },
                value: [],
                tableData: [],
                multipleSelection: [],
                src: '',
                //分页
                page: {
                    currentPage: 1, // 当前页
                    total: 0, // 数据总条数
                    pageSize: 3, // 每页条数
                },
            }
        },

        //过滤器
        filters: {
            rounding(v) {
                return (Math.round(v * 100) / 100).toFixed(2);
            }
        },
        created() {
            this.getclass()

        },
        methods: {
            handleChange(value) {
                this.getcc()
            },
            //获取
            getcc() {
                this.$axios.get('/shop/selclass', {
                    params: {
                        id: this.value.toString(),
                        pageSize: this.page.pageSize,
                        currentPage: this.page.currentPage,
                    }
                }).then(res => {
                    this.tableData = res.data.data
                    this.page.total = res.data.count
                })
            },
            getclass() {
                this.$axios.get('/shop/getclass').then(res => {
                    this.options = res.data.data
                })
            },
            // 每页显示条数改变 就会触发这个函数
            handleSizeChange(val) {
                // 保存每页显示的条数
                this.page.pageSize = val;
                this.getcc()
            },
            // 当前页码改变 就会触发这个函数
            handleCurrentChange(val) {
                // 保存当前页码
                this.page.currentPage = val;
                this.getcc()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val

            },
            del(del) {
                this.$confirm(`此操作将永久删除该商品编号${del.Storeid}, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete(`/shop/shoplist/${del.id}`).then(res => {
                        if (res.data.status == 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getcc()
                        } else {
                            this.$message.error("删除失败");
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            delshop() {
                let id = this.multipleSelection.map(e => {
                    return {
                        'id': e.id
                    }
                })
                this.$confirm(`此操作将永久删除, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete('/shop/delshop', {
                        data: {
                            id: id
                        }
                    }).then(res => {
                        if (res.data.state == 'ok') {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getcc()
                        } else {
                            this.$message.error("删除失败");
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        }
    }
</script>
<style lang="less">
    .demo-table-expand {
        font-size: 0;
    }
    
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
    }
</style>